var React=require('React');
var RssSourceLists=require('../components/RssSourceLists');
var RssSourceEditor=require('../components/RssSourceEditor')
var SourceStore=require('../stores/SourceStore');

/**
 * Retrieve the current TODO data from the TodoStore
 */
function getSourceState() {
  return {
    allSource: SourceStore.getAll(),
  };
}

var RssSourceLayout=React.createClass({

  getInitialState: function() {
    return getSourceState();
  },

  componentDidMount: function() {
    SourceStore.addChangeListener(this._onChange);
  },

  componentWillUnmount: function() {
    SourceStore.removeChangeListener(this._onChange);
  },

  render:function(){
    return (
      <div {...this.props}>
        <h2 className='cen'>Rss Source List</h2>
        <hr/>
        <RssSourceLists sources={this.state.allSource}/>
        <nav className="nav">
            <ul className="nav-list">
                <li className="nav-item">
                    <a className="nav-item-a pure-button" href="#popup1" >Add</a>
                </li>
                <li className="nav-item">
                    <a className="nav-item-a pure-button" href="#">Edit</a>
                </li>
                <li className="nav-item">
                    <a className="nav-item-a pure-button" href="#">Del</a>
                </li>
            </ul>
        </nav>
        <RssSourceEditor id='popup1' />
      </div>

    )
  },

  /**
  * Event handler for 'change' events coming from the TodoStore
   */
  _onChange: function() {
    this.setState(getSourceState());
  }

});

module.exports=RssSourceLayout;
